<script setup lang="ts">
import { HomeAPI } from "@/api/HomeAPI";
import { useHomeStore } from "@/stores/homeStore";
import { useUserStore } from "@/stores/userStore";
import { ElMessage, ElMessageBox } from "element-plus";
//导入用户store
const useStroe = useUserStore();
//获取用户信息状态
const { userinfo } = storeToRefs(useStroe);
//导入首页信息
const homeStore = useHomeStore();
function handsuccess(res?: any) {
  if (res.code === 200) {
    ElMessage({
      showClose: true,
      message: res.msg,
      type: "success",
    });
    //获取头像信息
    homeStore.getImgList();
  } else {
    ElMessage({
      showClose: true,
      message: res.msg,
      type: "error",
    });
  }
}
//删除头像
function delete_list(nid: string) {
  ElMessageBox.confirm("确定删除头像?", "头像", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const response = await HomeAPI.delete_Avatars(nid);
      if (response.code === 200) {
        ElMessage({
          type: "success",
          message: response.msg,
        });
        homeStore.getImgList();
      } else {
        ElMessage({
          type: "error",
          message: response.msg,
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除头像",
      });
    });
}
</script>
<template>
  <main>
    <BkPersonalcenter></BkPersonalcenter>
    <ul class="flex avatar_list">
      <li v-for="item in homeStore.Via_img_List.result" :key="item.nid">
        <div @click="delete_list(item.nid)" v-if="userinfo.result.is_superuser"  class="delete_icon flex">
          <i class="fa fa-trash"></i>
        </div>
        <img :src="item.url" alt="" />
      </li>
    </ul>

    <el-upload
      class="upload-demo"
      :on-success="handsuccess"
      multiple
      action="http://localhost:8080/api/upload/avatar/"
      list-type="picture"
    >
      <el-button type="primary">上传头像</el-button>
      <template #tip>
        <div class="el-upload__tip">只能上传jpg/png文件,且不超过 2MB</div>
      </template>
    </el-upload>
  </main>
</template>

<style scoped lang="scss">
main {
  .avatar_list {
    margin-top: 20px;
    flex-wrap: wrap;
    list-style: none;

    > li {
      margin-right: 20px;
      margin-bottom: 20px;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      &:hover {
        .delete_icon {
          opacity: 1;
        }
      }
      img {
        height: 70px;
        width: 70px;
        border-radius: 5px;
      }
    }
    .delete_icon {
      height: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      position: absolute;
      bottom: 0;
      opacity: 0;
      transition: all 0.3s;
      display: flex;
      i {
        margin: 0 auto;
        color: var(--el-bg-color);
        cursor: pointer;
      }
    }
  }
  .upload-demo {
    margin-top: 20px;
  }
}
</style>
